<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding: 0px;
				box-sizing: border-box;
			}
			ul li{
				list-style: none;
			}
			.container{
				width:400px;
				min-height: calc(100vh - 20px);
				border: 2px solid #eee;
				margin:10px auto;
				padding: 10px;
			}
			#addText{
				width:100%;
				height: 50px;
				border: 2px solid #00BFFF;
				outline: none;
				font-size: 20px;
				padding-left: 10px;
				margin-bottom: 15px;
				color:#00BFFF ;	
			}
			::-webkit-input-placeholder{
				color:#00BFFF ;	
			}
			.fenge{
				font-family: Georgia,Times New Roman,Times,serif;
				text-align: center;
				color:#fff;
				text-shadow: 1px 2px #000;
				display: none;
				margin-bottom: 15px;
			}
			.undo{
				position: relative;
			}
			.undo .item{
				width: 100%;
				height: 50px;
				box-shadow: 4px 4px 11px 0 hsla(0,0%,56%,.57);
				margin-bottom: 10px;
			}
			.undo .item:hover{
				box-shadow: 6px 6px 11px 0 hsla(0,0%,56%,.8);
			}
			.undo .list{
				background:deepskyblue ;
				width:50px;
				height: 50px;
				padding: 4px;
				cursor: pointer;
				float: left;
			}
			.undo .list img{
				width: 42px;
				height: 42px;
			}
			.concent{
				width:326px;
				height:50px ;
				float: left;
				font-size: 20px;
				padding: 10px 0;
				padding-left: 10px;
			}
			.change{
				width:326px;
				height:50px ;
				float: right;
				font-size: 20px;
				padding: 10px 0;
				padding-left: 10px;
				position: absolute;
				top:0px;
				right: 0px;
				display: none;
			}
			
			.done{
				position: relative;
			}
			.done .item{
				width: 100%;
				height: 50px;
				box-shadow: 4px 4px 11px 0 hsla(0,0%,56%,.57);
				margin-bottom: 10px;
			}
			.done .item:hover{
				box-shadow: 6px 6px 11px 0 hsla(0,0%,56%,.8);
			}
			.done .list{
				background:deepskyblue ;
				width:50px;
				height: 50px;
				padding: 4px;
				cursor: pointer;
				float: left;
			}
			.done .list img{
				width: 42px;
				height: 42px;
			}
			
			.zx{
				width:65px;
				height: 25px;
				border-radius: 5px;		
				position: absolute;
				bottom: 30px;
				left:48%;
				padding:0px 5px;
			}
			.zx:hover{
				background-color: #666666;
			}
			.tr{
				width: 25px;
				height: 25px;
				background-image: url(images/lajix.png);
				background-size: 100%;
				display:inline-block;
				vertical-align: middle;
				margin-right: 8px;
				cursor: pointer;
			}
			.yl{
				width: 20px;
				height: 20px;
				background-image: url(images/yl.png);
				background-size: 100%;
				display:inline-block;
				vertical-align: middle;
				cursor: pointer;
			}
			.noyl{
				width: 20px;
				height: 20px;
				background-image: url(images/noyl.png);
				background-size: 100%;
				display:none;
				vertical-align: middle;
				cursor: pointer;
			}
			.ding{
				/* display: none; */
			}
		</style>
	</head>
	<body>
		<div class="container">
			<input type="text" placeholder="add new to-do..." id="addText"/>
			<div class="wrap">
				<ul class="undo">
					<!-- <li class="item">
						<div class="list">
							<img src="images/check.png" class="photo">
						</div>
						<p class="concent">111</p>
						<input class="change" value=" "/>
					</li> -->
				</ul>
				<p class="fenge">~Done~</p>
				<ul class="done">
					
				</ul>
				
				<div class="zx">
					<i class="tr"></i><i class="yl"></i><i class="noyl"></i>
				</div>
			</div>
			<video src="images/mp3.mp3"class="ding"></video>
		</div>
		
		
		<script>
			var addipt=document.querySelector("input");
			var addText=document.querySelector("#addText");
			var undo=document.querySelector(".undo");
			var done=document.querySelector(".done");
			var fenge=document.querySelector(".fenge");
			var zx=document.querySelector(".zx");
			var tr=document.querySelector(".tr");
			var yl=document.querySelector(".yl");
			var noyl=document.querySelector(".noyl");
			var ding=document.querySelector(".ding");
			
			addText.onkeyup=function(e){
				// console.log(e.keyCode);
				if(e.keyCode==13){
					var txt=addText.value;
					if(txt==""){
						alert("不能为空");
					}
					else{
						var li=document.createElement("li");
						li.classList.add("item");
						li.innerHTML="<div class='list'>"
							          +"<img src='images/check.png' class='photo'>"
									  +"</div>"
									  +"<p class='concent'>"+txt+"</p>";
						undo.appendChild(li);
						addText.value="";
					}
				}
			}
			
			undo.onclick=function(e){
				// console.log(e.target);
				
				if(e.target.classList.contains("photo")){
					// console.log(11);
					var li2=document.createElement("li");
					li2.classList.add("item");
					var txt=e.target.parentNode.parentNode.innerText;
					li2.innerHTML=`<div class="list">
								<img src="images/check2.png" class="photo">
								</div>
								<p class="concent">${txt}</p>`;
					done.appendChild(li2);
					this.removeChild(e.target.parentNode.parentNode);
					
				}				
				var li2 = document.querySelectorAll('.done li');
				if(li2.length != 0){
					fenge.style.display = "block";
				}
				else{
					fenge.style.display = "none";
				}
				ding.play();
			}
			
			done.onclick=function(e){
				// console.log(e.target);
				if(e.target.classList.contains("content")){
					
				}
				if(e.target.classList.contains("photo")){
					// console.log(11);
					var li2=document.createElement("li");
					li2.classList.add("item");
					var txt=e.target.parentNode.parentNode.innerText;
					li2.innerHTML=`<div class="list">
								<img src="images/check.png" class="photo">
								</div>
								<p class="concent">${txt}</p>`;
					undo.appendChild(li2);
					this.removeChild(e.target.parentNode.parentNode);
				}
				var li2 = document.querySelectorAll('.done li');
				if(li2.length != 0){
					fenge.style.display = "block";
				}
				else{
					fenge.style.display = "none";
				}
				ding.play();
			}
			
			
			zx.onclick=function(e){
				var li=document.querySelectorAll(".done li");
				if(e.target.classList.contains("tr")){
					alert("是否删除?");
					for(var i=0;i<li.length;i++){
						if(li[i]!=""){
							done.removeChild(li[i]);
						}
						else{
							alert("未选择");
						}
					}
				}
				if(e.target.classList.contains("yl")){
					yl.style.display="none";
					noyl.style.display="inline-block";
					
				}
				if(e.target.classList.contains("noyl")){
					yl.style.display="inline-block";
					noyl.style.display="none";
					ding.play();
				}
			}
			
		</script>
	</body>
</html>
